import React from 'react'
import F from 'lodash/fp'

class Crop extends React.Component {
    constructor(props) {
        super(props)
        this.id = F.uniqueId('crop_')
        this.cropper = F.once(() => $('#' + this.id).cropper(this.props.opts))
    }

    shouldComponentUpdate(nextProps) {
        return !!nextProps.src
    }

    componentDidUpdate() {
        F.isFunction(this.props.ready) && this.props.ready(this.cropper())
        this.cropper().cropper('replace', this.props.src).cropper('setAspectRatio', this.props.ratio)
    }

    componentDidMount() {
        F.isFunction(this.props.ready) && this.props.ready(this.cropper())
        this.cropper().cropper('replace', this.props.src).cropper('setAspectRatio', this.props.ratio)
    }
 
    render () {
        return <img id={this.id} src={this.props.src} />
    }
}

export default Crop